import React, { Component, } from 'react'
import {
	Text, View, Image, ScrollView, Platform,
  TouchableOpacity, StyleSheet,
  ImageBackground
} from 'react-native'
import { connect } from 'react-redux';
import { SafeAreaView } from 'react-navigation'
import { AssetImages } from '../../constants'
import { Px } from '../../utils'

class My extends Component {
	constructor(props) {
		super(props);
	}

	componentWillMount(){
	}

	render() {
		console.log('render my', this.props)
		const { isLogin } = this.props
		return (
			<SafeAreaView style={styles.container}>
				{this._renderIsLogin()}
				<TouchableOpacity
					onPress={() => {
						if (isLogin) {
							this.props.navigation.navigate('MyPet')
						} else {
							this.props.navigation.navigate('Login')
						}
					}}
					style={styles.myPetBtn}>
					<Text style={styles.myPetText}>我的爱宠</Text>
				</TouchableOpacity>
				<TouchableOpacity
					onPress={() => {
						if (isLogin) {
							this.props.navigation.navigate('MyWork')
						} else {
							this.props.navigation.navigate('Login')
						}
					}}
					style={styles.myWorkBtn}>
					<Text style={styles.myWorkText}>我的作品</Text>
				</TouchableOpacity>
				<TouchableOpacity
					onPress={() => {
						if (isLogin) {
							this.props.navigation.navigate('MyFavirate')
						} else {
							this.props.navigation.navigate('Login')
						}
					}}
					style={styles.myFavBtn}>
					<Text style={styles.myFavText}>我的喜欢</Text>
				</TouchableOpacity>
				<TouchableOpacity
					onPress={() => {
						if (isLogin) {
							this.props.navigation.navigate('MyFollow')
						} else {
							this.props.navigation.navigate('Login')
						}
					}}
					style={styles.myFocus}>
					<Text style={styles.myFocusText}>我的关注</Text>
				</TouchableOpacity>
				<TouchableOpacity
					style={styles.myFocus}
					onPress={() => {
						if (isLogin) {
							this.props.navigation.navigate('PersonMessage', { user: this.props.user })
						} else {
							this.props.navigation.navigate('Login')
						}
					}}
				>
					<Text style={styles.myFocusText}>个人资料</Text>
				</TouchableOpacity>
			</SafeAreaView>
		)
	}

	_renderIsLogin() {
		if (this.props.isLogin) {
			const { background } = this.props.user || {}
			if (background.length === 0) {
				return <ImageBackground
					source={AssetImages.DEFAULT_FACE_IMAGE}
					style={[styles.headImage, { alignItems: 'center', justifyContent: 'center' }]}
				></ImageBackground>
			} else {
				return <Image 
					source={{url: background}}
					style={styles.headImage}
				/>
			}
		} else {
			return (
				<TouchableOpacity
					onPress={() => {
						this.props.navigation.navigate('Login')
					}}
				>
					<ImageBackground
						source={AssetImages.DEFAULT_FACE_IMAGE}
						style={[styles.headImage, { alignItems: 'center', justifyContent: 'center' }]}
					>
						<Text>未登录</Text>
					</ImageBackground>
				</TouchableOpacity>
			)
		}
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center',
		backgroundColor: '#fff'
	},
	headImage: {
		width: Px(160),
		height: Px(160)
	},
	myPetBtn: {
		marginTop: Px(120)
	},
	myPetText: {
		fontSize: Px(36)
	},
	myWorkBtn: {
		marginTop: Px(30)
	},
	myWorkText: {
		fontSize: Px(36)
	},
	myFavBtn: {
		marginTop: Px(30)
	},
	myFavText: {
		fontSize: Px(36)
	},
	myFocus: {
		marginTop: Px(30)
	},
	myFocusText: {
		fontSize: Px(36)
	}
});

export default connect(state => ({
	isLogin: state.user.isLogin,
	user: state.user.user
}))(My)
